<template>
  <a-layout id="components-layout-demo-responsive">
    <a-layout-sider v-model="collapsed" collapsible>
      <div class="logo" />
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
        <a-menu-item key="1">
          <router-link to="/project"
            ><a-icon type="database" />
            <span class="nav-text">项目信息管理 </span></router-link
          >
        </a-menu-item>
        <a-menu-item key="2">
          <router-link to="/process">
            <a-icon type="windows" />
            <span class="nav-text">本地进程管理</span></router-link
          >
        </a-menu-item>
        <a-menu-item key="3">
          <router-link to="/em">
            <a-icon type="play-circle" />
            <span class="nav-text">项目执行管理</span></router-link
          >
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header
        :style="{
          background: '#fff',
          padding: 0,
          color: 'red',
          textAlign: 'center',
          fontSize: '25px',
        }"
      >
        毕业设计，仅用于学习交流
      </a-layout-header>

      <a-layout-content :style="{ margin: '24px 16px 0' }">
        <div :style="{ padding: '24px', background: '#fff', height: '100%' }">
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        DSFT ©2022 Created by Zhu Chun
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      collapsed: false,
    };
  },
  methods: {},
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#components-layout-demo-responsive .logo {
  height: 30px;
  background: url("images/毕业设计dsft.png");
  background-size: contain;
  margin: 16px;
}

.ant-layout {
  height: 100%;
}
</style>
